<template>
  <div class="title-tools">
    <fold :title="'标题'">
      <div class="content">
        <div style="margin-bottom:15px;">
          <span style="margin-bottom:5px;">标题:</span>
          <el-input size="mini" :value="title" v-model="the_title" @change="setTitle" placeholder="请输入标题"></el-input>
        </div>
        <div>
          <span>标题大小:</span>
          <el-slider :value="fontsize" v-model="the_fontsize" @input="setFontSize"></el-slider>
        </div>
        <div>
          <span>标题位置:</span>
          <el-slider :value="the_title_left" v-model="the_title_left" @input="setTitleLeft"></el-slider>
        </div>
        <div>
          <div style="display:flex;align-content:center;">
            <span style="padding-right:15px;">标题颜色:</span>
            <el-color-picker v-model="the_title_color" @change="setTitleColor" size="mini"></el-color-picker>
          </div>
        </div>
      </div>
    </fold>
  </div>
</template>

<script>
import Fold from "@/components/common/Fold.vue";
export default {
  props: ["title", "fontsize", "titleLeft", "titleColor"],
  components: {
    Fold,
  },
  data() {
    return {
      the_title: this.title,
      the_fontsize: this.fontsize,
      the_title_left: this.titleLeft,
      the_title_color: this.titleColor,
    };
  },
  watch: {
    title(val) {
      this.the_title = val;
    },
    fontsize(val) {
      this.the_fontsize = val;
    },
  },
  methods: {
    setTitle(val) {
      this.$store.commit("setChartActiveTitle", val);
    },
    setFontSize(val) {
      this.$store.commit("setChartActiveFontSize", val);
    },
    setTitleLeft(val) {
      this.$store.commit("setChartActiveTitleLeft", val);
    },
    setTitleColor(val) {
      this.$store.commit("setChartActiveTitleColor", val);
    },
  },
};
</script>

<style scoped>
.title-tools span {
  color: white;
}

.title-tools .content{
    padding:5px 10px 5px 10px;
}
</style>